{% extends "admin/change_form.html" %}
{% load i18n admin_urls static admin_modify staticfiles %}
{% block extrahead %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static "css/font-awesome.css" %}" />
    <link rel="stylesheet" href="{% static "css/jstree/style.min.css" %}" />
    <style>
        .jstree-default {
            background: white;
        }
        .jstree-open {
            background: white;
        }
        .jstree-default>.jstree-striped {
            background: none;
        }
        .jstree-default>.jstree-container-ul>.jstree-node {
            margin-left: 14px;
            margin-right: 0;
            margin-bottom: 5px;
        }
    </style>
    <script src="{% static "js/jquery.js" %}"></script>
    <script src="{% static "js/jstree.js" %}"></script>
    <script src="{% static "js/jstree_plugins/jstree.dnd.js" %}"></script>
    <script src="{% static "js/jstree_plugins/jstree.contextmenu.js" %}"></script>
{% endblock %}

{% block object-tools %}
{% if change %}{% if not is_popup %}
  <ul class="object-tools">
    {% block object-tools-items %}
    <li>
        {% url opts|admin_urlname:'history' original.pk|admin_urlquote as history_url %}
        <a href="{% add_preserved_filters history_url %}" class="historylink">{% trans "History" %}</a>
    </li>
    {% if has_absolute_url %}<li><a href="{{ absolute_url }}" class="viewsitelink">{% trans "View on site" %}</a></li>{% endif %}
    <li>
        <a href="../user/permissions/">{% trans "用户权限" %}</a>
    </li>
    <li>
        <a href="../group/permissions/">{% trans "组权限" %}</a>
    </li>
    {% endblock %}
  </ul>
{% endif %}{% endif %}
{% endblock %}


{% block after_related_objects %}
    <div class="results" id="tree_menu">
    </div>
    <script type="text/javascript">
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie != '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
        var csrftoken = getCookie('csrftoken');
        function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }
        jQuery.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                };
            }
        });
    </script>
    <script type="text/javascript">
        (function ($, undefined) {
            "use strict";
            $.jstree.defaults.conditionalselect = function () { return true;  };
            $.jstree.plugins.conditionalselect = function (options, parent) {
                this.activate_node = function (obj, e) {
                    if(this.settings.conditionalselect.call(this, this.get_node(obj))) {
                        parent.activate_node.call(this, obj, e);
                    }
                };
            };
        })(jQuery);
        $('#tree_menu').jstree({
            "core" : {
                "animation" : 0,
                "check_callback" : true,
                "themes" : {"stripes": true},
                'data' : {
                    'url': '/admin/treemenu/menuitem/{{ original.root.pk  }}/flatten_children',
                    'dataType': 'json'
                }
            },
            "plugins": [
                "contextmenu", "dnd"
            ]
        });

        $('#tree_menu').on("move_node.jstree", function (e, data) {
            $.ajax({
                'url': '/admin/treemenu/menuitem/' + data.node.id + '/api/move',
                'method': 'POST',
                'dataType': 'json',
                'data': {
                    'parent': data.parent, 
                    'rank': data.position
                },
                'success': function(result) {
                    
                }
            })
        });
        $('#tree_menu').on("create_node.jstree", function (e, data) {
            $.ajax({
                'url': '/admin/treemenu/menuitem/api/add',
                'method': 'POST',
                'dataType': 'json',
                'data': {
                    'label': data.node.text,
                    'parent': data.node.parent,
                    'icon': data.node.icon.split(' ')[1]
                },
                'success': function(result) {
                    data.instance.set_id(data.node, result.id);
                }

            })
        });
        $('#tree_menu').on("rename_node.jstree", function (e, data) {
            $.ajax({
                'url': '/admin/treemenu/menuitem/' + data.node.id + '/api/change',
                'method': 'POST',
                'dataType': 'json',
                'data': {
                    'label': data.node.text
                },
            })
        });
        $('#tree_menu').on("delete_node.jstree", function (e, data) {
            $.ajax({
                'url': '/admin/treemenu/menuitem/' + data.node.id + '/api/delete',
                'method': 'POST',
                'dataType': 'json',
                'data': {
                },
            })
        });
    </script>
{% endblock %}
